<template>
  <div class="center-3-container">
    <div class="list">
      <el-select
        v-model="newdeptId"
        placeholder="请选择"
        :popper-append-to-body="false"
      >
        <el-option
          v-for="item in deptList"
          :key="item.deptId"
          :label="item.deptName"
          :value="item.deptId"
        >
        </el-option>
      </el-select>
    </div>
    <div class="list">
      <el-select
        v-model="newprojectId"
        placeholder="请选择"
        :popper-append-to-body="false"
      >
        <el-option
          v-for="item in projectList"
          :key="item.deptId"
          :label="item.deptName"
          :value="item.deptId"
        >
        </el-option>
      </el-select>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      newdeptId: "",
      newprojectId: "",
    };
  },
  watch: {
    newdeptId: {
      handler(val = "") {
        if (val !== this.deptId) {
          this.setState({
            deptId: val,
          });
        }
      },
    },
    newprojectId: {
      handler(val = "") {
        if (val !== this.deptId) {
          this.setState({
            projectId: val,
          });
        }
      },
    },
    projectId(val){
      this.newprojectId = Number(this.projectId);
    },
  },
  computed: {
    ...mapState("reportFormDark", ["deptList", "deptId","projectList","projectId"]),
  },
  methods: {
    ...mapMutations("reportFormDark", ["setState"]),
  },
  created() {
    this.newdeptId = Number(this.deptId);
   
    this.newprojectId = Number(this.projectId);
  },
};
</script>

<style lang="scss" scoped>
@import "@/views/report_form_dark/styles/fn.scss";

.center-3-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  padding-top: vh(10);

  .list {
    width: vw(160);
    height: vh(32);
    background: rgba(0, 80, 171, 0.4);
    margin: 0 vw(4);

    ::v-deep {
      .el-select {
        width: 100%;
        height: 100%;

        .el-input {
          width: 100%;
          height: 100%;

          input {
            width: 100%;
            height: 100%;
            font-size: vw(14);
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #8fc7ff;
            background: rgba(0, 80, 171, 0.4);
            border: 1px solid #1890ff;
          }
        }

        .el-input__suffix {
          display: flex;
          align-items: center;

          i {
            color: rgba(143, 199, 255, 1);
          }
        }
      }

      .el-select-dropdown {
        background: rgba(0, 80, 171, 0.4);
        font-size: vw(14);
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #8fc7ff;
        border: 1px solid #1890ff;

        .el-select-dropdown__item {
          background: rgba(0, 80, 171, 0.4);
          font-size: vw(14);
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #8fc7ff;

          &:hover {
            opacity: 0.8;
          }
        }

        .popper__arrow {
          border-top-color: #1890ff;

          &::after {
            border-top-color: #1890ff;
          }
        }
      }
    }
  }
}
</style>